import {Icon} from 'antd';
import {WeaRichText} from 'ecCom';
import '../style/index.css';
import WeaContractCk from '../../../comp/weaContractCk/index';
import CommentItem from './CommentItem';


export default class Comment extends React.Component {
    constructor(props) {
		super(props);
		const dynamicKey = this.props.dynamicKey;
		this.state=({
			showCommentDiv:dynamicKey=="comment",
			showCommentCk:false
		});
    }
	
	componentWillReceiveProps(nextProps) {

        if (this.props.dynamicKey !== nextProps.dynamicKey) {
			this.setState({dynamicKey:nextProps.dynamicKey,showCommentDiv:nextProps.dynamicKey=="comment",showCommentCk:false});
        }
    }


	render() {
		const {refId,dynamicKey} = this.props;
		const {showCommentDiv,showCommentCk} = this.state;
		const bottomBarConfig = [
            // {
            // name: 'Component', // 自定义组件
            // show: <Com />,
            // },
            {
            name: 'Upload', // 上传组件
            type: 'list', // 上传组件类型
            show: <span style={{ fontSize: 12 }}>
                <Icon type='paper-clip' title='上传附件' /> 附件</span>, // 使用 antd 图标
            uploadUrl: '/api/doc/upload/uploadFile?model=reply', // 上传地址
            category: '/api/doc/upload/uploadFile?model=reply', // 文档目录
            onListChange: (ids, list) => console.log('ids, list: ', ids, list),
            },
            {
            name: 'Browser', // 浏览按钮组件
            show: <span style={{ fontSize: 12 }}>
                <i className='icon-coms-Journal' title='文档' /> 文档</span>, // 使用组件库图标
            type: '37', // 浏览按钮类型 文档
            title: '文档', // 浏览按钮标题
            },
            {
            name: 'Browser', // 浏览按钮组件
            show: <span style={{ fontSize: 12 }}>
                <i className='icon-coms-Workflow-o' title='流程' /> 流程</span>,
            type: '152', // 浏览按钮类型
            title: '流程', // 浏览按钮标题
            },
        ];
		return (
            <div>
				<div style={{paddingLeft: '5px',paddingRight:'5px',paddingTop:'10px'}}>
					{showCommentDiv&&<div className={"wea-workflow-req-sign-input"} onClick={()=>this.doShowCommentCk(true)}><em className='icon-coms-edit'></em><span style={{marginLeft:'10px'}}>请添加评论内容</span></div>}
					{showCommentCk&&<WeaContractCk bottomBarConfig={bottomBarConfig} editorId={'remark'} isShowSignInput={true} actions={{onCancelComment:this.doShowCommentCk.bind(this),onPublicComment:this.onPublicComment.bind(this)}} onChange={()=>this.onCommentChange.bind(this)}/>}
					<CommentItem />
					<CommentItem />
				</div>
            </div>
        );
	};

	onCommentChange=(obj,bool)=>{
		console.log(obj,bool);
	}

	onPublicComment=()=>{
		console.log('onPublicComment');
		this.doShowCommentCk(false);
	}


	doShowCommentCk =(bool) =>{
		this.setState({ showCommentCk: bool ,showCommentDiv:!bool});
	}


}
